
<template>
<!--跑马灯组件 animate__animated 其它class复用vant样式 noticeBbarClass animate.css库class -->
  <div v-show="isMarquee" role="alert" class="van-notice-bar" :class="['animate__animated',noticeBbarClass]" >
    <i class="van-icon van-icon-volume-o van-notice-bar__left-icon"></i>
    <div role="marquee" class="van-notice-bar__wrap">
       <transition name="marquee" @before-enter="marqueeBeforeEnter" @enter="marqueeEnter" @after-enter="marqueeAfterEnter"
        @before-leave="marqueeBeforeLeave" @leave="marqueeleLeave" @after-leave="marqueeAfterLeave" :css="false" :appear='true'>
        <div v-if="isMarquee" ref="marqueeDom" class="marquee-box" :style="note">
          {{text}}
        </div>
     </transition>
    </div>
    </div>
</template>
<script>
  export default {
    components: {
    },
    props: {
     text:String,
     isMarquee:Boolean,//是否展示跑马灯
     noticeBbarClass:String,//控制动画效果
    },
    data() {
      return {
      }
    },
   created(){
     
   },
    mounted () {
    },
    updated(){

    },
    methods: {
         //跑马灯动画
      marqueeBeforeEnter(el, done) {
        el.style['white-space'] = 'nowrap'
        Velocity(
          el, {
            translateX: 0,
          }, {
            duration: 3000,
            easing: "linear",
            complete:done,
          }
        );
      },
      marqueeEnter: function(el, done) {
        let _this = this
        const offsetWidth = this.$refs.marqueeDom.offsetWidth;
        const clientWidth = document.body.clientWidth;
        // console.log('marqueeEnter',offsetWidth,clientWidth);
        Velocity(
          el, {
            translateX: (offsetWidth + 95 > clientWidth) ?-(offsetWidth - clientWidth + 95):0,
          }, {
            duration: offsetWidth * 8000 / clientWidth,
            easing: "linear",
            complete: function(){
              setTimeout(()=>{//页面中停留3s
                _this.$emit("formChildMsg", {
                  type: "closeNoticeBbar",
                  data: {msg:'liuyu'}
                })
              },3000)
              
            },
          }
        );
      },
      marqueeAfterEnter: function(el) {  
      },
      marqueeBeforeLeave: function(el) {
      },
      marqueeLeave: function(el, done) {
      },
      marqueeAfterLeave: function(el) {
      },
    },
  };
</script>
<style lang="less" scoped>
.van-notice-bar.animate__animated{
  width: 100vw;
  height: 86px!important;
  position: absolute;
  top: 20px!important;
  padding: 0 60px;
  z-index: 99999!important;
  background: url('../assets/images/notice_bar_bg.png') no-repeat!important;
  background-size: 100% 100%!important;
  overflow:hidden;
   -webkit-backface-visibility: hidden;
   -webkit-transform-style: preserve-3d;
   /deep/ .van-notice-bar__content,/deep/ .van-icon{
    font-size: 28px;
    font-weight: 500;
    color: #FFFFFF;
    -webkit-backface-visibility: hidden;
   -webkit-transform-style: preserve-3d;
   }
  .marquee-box{
    font-size: 28px;
    font-weight: 500;
    color: #FFFFFF;
  }

}
</style>
